<template>
  <Dialog v-model="dialogVisible" title="监控详情" width="900px">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="监控名称">
        {{ monitoringData.monitoringName || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="监控类型">
        <el-tag>{{ getTypeName(monitoringData.monitoringType) }}</el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="监控对象">
        {{ monitoringData.monitoringObject || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="监控状态">
        <el-tag :type="getStatusColor(monitoringData.status)">
          {{ getStatusName(monitoringData.status) }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="监控时间">
        {{ monitoringData.monitoringTime || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="监控员">
        {{ monitoringData.monitoringPersonnel || '-' }}
      </el-descriptions-item>
      <el-descriptions-item label="监控描述" :span="2">
        <div style="white-space: pre-wrap; max-height: 150px; overflow-y: auto;">
          {{ monitoringData.monitoringDesc || '-' }}
        </div>
      </el-descriptions-item>
    </el-descriptions>
    
    <!-- 监控指标 -->
    <el-divider content-position="left">监控指标</el-divider>
    <el-table :data="monitoringData.metricsList || []" border style="width: 100%">
      <el-table-column prop="metricName" label="指标名称" width="150" />
      <el-table-column prop="metricValue" label="当前值" width="100" />
      <el-table-column prop="standardValue" label="标准值" width="100" />
      <el-table-column prop="threshold" label="阈值" width="100" />
      <el-table-column prop="status" label="状态" width="100">
        <template #default="{ row }">
          <el-tag :type="getMetricStatusColor(row.status)">
            {{ getMetricStatusName(row.status) }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="remark" label="备注" />
    </el-table>
    
    <!-- 异常记录 -->
    <el-divider content-position="left" v-if="monitoringData.exceptionList && monitoringData.exceptionList.length > 0">
      异常记录
    </el-divider>
    <el-table :data="monitoringData.exceptionList || []" border style="width: 100%" v-if="monitoringData.exceptionList && monitoringData.exceptionList.length > 0">
      <el-table-column prop="exceptionTime" label="异常时间" width="150" />
      <el-table-column prop="exceptionType" label="异常类型" width="120">
        <template #default="{ row }">
          <el-tag type="danger">{{ row.exceptionType }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="exceptionDesc" label="异常描述" />
      <el-table-column prop="handleStatus" label="处理状态" width="100">
        <template #default="{ row }">
          <el-tag :type="row.handleStatus === 1 ? 'success' : 'warning'">
            {{ row.handleStatus === 1 ? '已处理' : '待处理' }}
          </el-tag>
        </template>
      </el-table-column>
    </el-table>
    
    <!-- 监控报告 -->
    <el-divider content-position="left" v-if="monitoringData.reportContent">监控报告</el-divider>
    <div style="background: #f5f5f5; padding: 15px; border-radius: 4px;" v-if="monitoringData.reportContent">
      <div style="white-space: pre-wrap;">
        {{ monitoringData.reportContent }}
      </div>
    </div>
    
    <template #footer>
      <el-button @click="dialogVisible = false">关闭</el-button>
    </template>
  </Dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dialogVisible = ref(false)
const monitoringData = ref({} as any)

const getTypeName = (type: number) => {
  const typeMap = { 1: '实时监控', 2: '定时监控', 3: '事件监控' }
  return typeMap[type] || '-'
}

const getStatusName = (status: number) => {
  const statusMap = { 0: '未开始', 1: '监控中', 2: '已完成', 3: '异常中断' }
  return statusMap[status] || '-'
}

const getStatusColor = (status: number) => {
  const colorMap = { 0: 'info', 1: 'warning', 2: 'success', 3: 'danger' }
  return colorMap[status] || 'info'
}

const getMetricStatusName = (status: number) => {
  const statusMap = { 1: '正常', 2: '警告', 3: '异常' }
  return statusMap[status] || '-'
}

const getMetricStatusColor = (status: number) => {
  const colorMap = { 1: 'success', 2: 'warning', 3: 'danger' }
  return colorMap[status] || 'info'
}

const open = (data: any) => {
  dialogVisible.value = true
  monitoringData.value = data
}

defineExpose({ open })
</script> 